<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="m-search">
        <input class="search" name="search_company">
    </div>
    <script type="text/html" id="tpl-suggest">
        <div class="ui-suggest">
            <ul class="ui-suggest-list"></ul>
        </div>
    </script>
</body>
<script src="./res/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    var func = {
        init: function () {
            func.getSuggest();
        },
        getSuggest: function () {
            var that = document.querySelector('input[name="search_company"]'), isInputZh = false;
            if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0"){
                //  如果是ie8不执行监听事件
            }else{
                that.addEventListener('compositionstart',function(e){
                    isInputZh = true;
                },false);
                that.addEventListener('compositionend',function(e){
                    isInputZh = false;
                    func.setSuggest();
                },false);
            }
            $('input[name="search_company"]').on('input propertychange',function(e){
                /*$('.m-search').find('p.u-err').removeClass('s-show').find('span').html('');*/
                if(isInputZh){
                    return false;
                }
                func.setSuggest();
            });
        },
        setSuggest: function () {
            var keywords = $.trim($('input[name="search_company"]').val());
            if(keywords != '' && keywords.length > 0){
                var isNumTest = /^[a-z0-9]+$/i;
                if(isNumTest.test(keywords.slice(0,1))){    //判断首字符是否是数字
                    //TODO
                   return;
                }else{
                    func.doSuggest(keywords);
                }
            } else {
                $('.ui-suggest').remove();
            }
        },
        doSuggest: function () {
            $('.ui-suggest').remove();
            alert(document.getElementById('tpl-suggest').innerHTML);
            $('.m-search').append(document.getElementById('tpl-suggest').innerHTML);
            var sugLi = '';
            sugLi +='<li>'+ 中国 +'<em>|</em>'+ 1111 +'</li>';
            sugLi +='<li>'+ 中国2 +'<em>|</em>'+ 222 +'</li>';
            $('.ui-suggest-list').html(sugLi);
            if(height < 690){
                var length = $('.ui-suggest-list').find('li').length;
                $('.ui-suggest').css('top',-length*41-4+'px');
            }else{
                $('.ui-suggest').css('top','61px');
            }
        }
    };

    $(function(){
        func.init();
    });

   /* $(function () {
        $('.m-search').find('input.search').keydown(function(e){
            if(e.keyCode==13){
                if($(this).val() == '' || $(this).val().length == 0){
                    alert('请输入搜索关键词');
                } else{
                    alert("调用");
                }
            }
        });
    });*/
</script>
</html>